<template>
  <div class="temp-card">
    <div class="card-header">
      <span class="name">{{ sensor?.sensorName }}</span>
      <div class="status-group">
        <el-tag size="small" :type="sensor?.currentRecord?.online ? 'success' : 'info'" effect="dark">
          {{ sensor?.currentRecord?.online ? '在线' : '离线' }}
        </el-tag>
        <el-tag size="small" class="status-tag">
          📶
          {{ sensor?.currentRecord?.signalStrength || 0 }}dBm
        </el-tag>
        <el-tag size="small" class="status-tag" :type="getBatteryType(sensor?.currentRecord?.quantity)">
          🔋
          {{ sensor?.currentRecord?.quantity || 0 }}%
        </el-tag>
      </div>
    </div>
    
    <div class="card-content">
      <!-- 横向布局的数据区域 -->
      <div class="data-container">
        <!-- 当前温度仪表盘 -->
        <div class="current-data">
          <EchartsCard 
            :options="getTemperatureGaugeOptions(sensor?.currentRecord?.temperature || 0)"
            height="180px"
          />
        </div>

        <!-- 历史温度曲线 -->
        <div class="history-data">
          <EchartsCard 
            :options="getTemperatureChartOptions(historyData)"
            height="180px"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EchartsCard from './EchartsCard.vue'

export default {
  name: 'TempCard',
  components: {
    EchartsCard
  },
  props: {
    sensor: {
      type: Object,
      default: () => null
    },
    historyData: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    getTemperatureGaugeOptions(value) {
      const tempRanges = [
        { min: 0, max: 15, color: '#409EFF' },   // 低温蓝色
        { min: 15, max: 30, color: '#67C23A' },  // 正常绿色
        { min: 30, max: 50, color: '#F56C6C' }   // 高温红色
      ]
      
      const currentColor = tempRanges.find(range => 
        value >= range.min && value <= range.max
      )?.color || '#909399'

      return {
        series: [{
          type: 'gauge',
          min: 0,
          max: 50,
          radius: '85%',
          center: ['50%', '60%'],
          axisLine: {
            lineStyle: {
              width: 20,
              color: [
                [0.3, '#409EFF'],  // 0-15度
                [0.6, '#67C23A'],  // 15-30度
                [1, '#F56C6C']     // 30-50度
              ]
            }
          },
          pointer: {
            itemStyle: {
              color: currentColor
            },
            length: '60%',
            width: 4
          },
          axisTick: {
            distance: -20,
            length: 10,
            lineStyle: {
              color: '#fff',
              width: 1
            }
          },
          splitLine: {
            distance: -20,
            length: 20,
            lineStyle: {
              color: '#fff',
              width: 3
            }
          },
          // 刻度标签相关配置
          axisLabel: {
            color: '#999',   // 标签颜色
            distance: -15,    // 标签与轴线距离
            fontSize: 12     // 标签字体大小
          },
          
          detail: {
            valueAnimation: true,
            formatter: '{value}°C',
            color: currentColor,
            fontSize: 20,
            offsetCenter: [0, '80%']
          },
          data: [{
            value: value,
            name: '温度'
          }]
        }]
      }
    },

    getTemperatureChartOptions(data) {
      const temperatures = data.map(item => item.temperature)
      const maxTemp = Math.max(...temperatures)
      const minTemp = Math.min(...temperatures)
      const avgTemp = (temperatures.reduce((a, b) => a + b, 0) / temperatures.length).toFixed(1)

      return {
        tooltip: {
          trigger: 'axis'
        },
        title: {
          text: `最高: ${maxTemp}°C  最低: ${minTemp}°C  平均: ${avgTemp}°C`,
          textStyle: {
            fontSize: 12,
            color: '#666'
          },
          left: 'center',
          top: 0
        },
        grid: {
          left: '8%',
          right: '4%',
          bottom: '8%',
          top: '40px',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.map(item => 
            new Date(item.recordTime).toLocaleTimeString('zh-CN', {
              hour: '2-digit',
              minute: '2-digit'
            })
          )
        },
        yAxis: {
          type: 'value',
          name: '温度(°C)',
          min: 0,
          max: 50
        },
        series: [{
          name: '温度',
          type: 'line',
          smooth: true,
          data: temperatures,
          markLine: {
            data: [
              { type: 'average', name: '平均值' }
            ]
          },
          itemStyle: {
            color: '#409EFF'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: 'rgba(64,158,255,0.3)'
              }, {
                offset: 1,
                color: 'rgba(64,158,255,0)'
              }]
            }
          }
        }]
      }
    },
    getBatteryType(quantity) {
      if (!quantity) return 'info'
      if (quantity < 20) return 'danger'
      if (quantity < 50) return 'warning'
      return 'success'
    }
  }
}
</script>

<style lang="scss" scoped>
.temp-card {
  height: 95%;
  display: flex;
  flex-direction: column;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;

    .name {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
    }
  }

  .card-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;

    .data-container {
      height: 100%;
      display: grid;
      grid-template-columns: 40% 60%;
      gap: 8px;

      .current-data, .history-data {
        min-height: 0;
        height: 90%;
      }
    }
  }
}
</style> 